<template>
	<view class="main">
		<view class="top">
			<view class="mid" style="margin-top: 16px;margin-left: 16px;">
				<text style="font-size: 14px;color: #999999;font-family: 'PingFang SC';">处置情况反馈</text>
				<u--textarea v-model="resultText" placeholder="此处输入信息" count height="105px" maxlength='2000'
					style="margin-top: 8px;margin-right: 16px;"></u--textarea>
			</view>
			<div style="margin-top: 15px;">
				<u-line></u-line>
			</div>
			<view class="bottom" style="margin-top: 17px;margin-left: 16px;">
				<text style="font-size: 14px;color: #999999;font-family: 'PingFang SC';">现场照片</text>
				<view style="border: 0.5px solid #979797;width: 95%;height: 72px;margin-top: 8px;display: flex;">
					<view class="aaa" style="display: flex;" v-for="(item,index) in fileTempList" :key="index">
						<view style="position: relative; margin-top: 8px; margin-left: 8px;">
							<u--image :src="item.url" width="55px" height="55px"></u--image>
							<u-icon name="close" style="position: absolute; top: 2px; right: 2px;"
								@click="removeItem(index)"></u-icon>
						</view>
					</view>
					<u--image :src="upLoadUrl" v-show="fileTempList.length<5" width="55px" height="55px"
						style="margin-top: 8px;margin-left: 8px;" @click="getFile"></u--image>
				</view>
			</view>
			<view class="btn" style="margin-top: 24px;margin-left: 16px;margin-right: 16px;">
				<u-button @click="submit" text="提交" color="#FF5000" style="border-radius: 4px;" :loading="loading"></u-button>
				<u-button @click="returnPage" text="取消" color="#FF5000" plain
					style="margin-top: 8px;border-radius: 4px;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getFeedback,
		uploadFile
	} from '@/common/api.js'
	export default {
		onLoad: function(option) {
			this.id = option.id
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		data() {
			return {
				upLoadUrl: require("../../../static/icons/xjyw/add.png"),
				/* 时间 */
				startShow: false,
				startTime: Number(new Date()),
				endShow: false,
				endTime: Number(new Date()),

				id: null,
				resultText: '',
				bz: '',
				fileList: [],
				fileNum: null,

				/* 图片暂存列表 */
				fileTempList: [],
				/* 图片格式 */
				ijpeg: 'image/jpeg',
				ipng: 'image/png',
        loading: false,
			}
		},
		methods: {
			/* 对接文件 */
			getFile() {
				let that = this
				window.croods.customPlugin({
					action: 'ServicePermissionPlugin.uploadMaterial',
					params: {
						reason: "获取相机、文件权限",
						imgCount: "1",
						uploadTitle: "请选择上传方式",
						uploadType: "4",
					},
					success: function(res) {
						let tfile = res.files[0]
						if (res.flag) {
							let temp = tfile.file.replace(/[\r\n]/g, "")
							let url = 'data:' + tfile.type + ';base64,' + temp
							tfile.url = url
							that.fileTempList.push(tfile)
						} else {
							that.$u.toast('格式错误，上传失败');
						}
					},
					fail: function(msg) {
						if (msg != null || msg != undefined) {
							that.$u.toast(msg);
						} else {
							that.$u.toast('照片上传失败');
						}
					}
				});
			},
			removeItem(index) {
				this.fileTempList.splice(index, 1);
			},
			returnPage() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			async submit() {
        if(this.loading) {
          return 
        }
				if (this.fileTempList.length == 0) {
					this.$u.toast('现场照片未上传');
					return;
				}
				if (this.resultText == "" || this.resultText == null) {
					this.$u.toast('处置情况反馈未填写');
					return;
				}
				let fj = await this.getIds();
				this.fileNum = fj.slice(0, -1);
				let temp = {
					id: this.id,
					czms: this.resultText,
					bz: this.bz,
					czfjdz: this.fileNum
				}
        this.loading = true
				getFeedback(temp).then(response => {
					this.$u.toast('提交成功');
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				}).finally(() => {
          this.loading = false
        })
				/* this.returnPage() */
			},
			async getIds() {
				let fj = '';
				let promises = this.fileTempList.map(async item => {
					let temp = {
						bizType: "app",
						file: item.file,
						fileName: item.name,
						fileType: item.type
					}
					let res = await uploadFile(temp);
					fj += res.id + ';'
				})
				await Promise.all(promises);
				return fj;
			}

		},
		mounted() {

		}
	}
</script>

<style>
	.main {
		background-color: #FAFAFA;
		width: 100vw;
		height: 100vh;
	}
</style>